<template>
  <div class="tunnelvideo" v-loading="loading">
    <video
      class="videosmall"
      ref="videosmallone"
      preload="auto"
      muted
      autoplay
      style="object-fit: fill"
      type="rtmp/flv"
    >
      <source src="" />
    </video>
    <p class="name">{{ video.name }}</p>
  </div>
</template>

<script>
import flvjs from 'flv.js'

import { getLcUrlApi, getUrlApi, getVideoListApi } from '@/api/surveillance'
export default {
  name: 'MyVideo',
  props: {
    video: {
      type: Object
    }
  },
  data () {
    return {
      player: null,
      loading: false,
      accessToken: ''
    }
  },

  async mounted () {
    console.log(this.video)
    this.init(
      await this.getVideoUrl(
        this.video.buro,
        this.video.nvr,
        this.video.channel,
        this.video.type
      )
    )
  },
  methods: {
    async getVideoUrl (buro, nvr, channel, type) {
      const tokenList = await this.getVideoList(buro)
      console.log(tokenList)
      console.log(buro)
      const token = tokenList.find((item) => item.orgNo === buro)?.accessToken
      this.accessToken = token
      console.log(token)
      if (type == 'YS') {
        return await this.getUrl(token, nvr, channel)
      } else if (type == 'LC') {
        return await this.getLcUrl(token, nvr, channel)
      }
    },
    // 查询token信息
    async getVideoList (buro) {
      const res = await getVideoListApi({
        orgNo: buro || '',
        pageNo: 0,
        pageSize: 10
      })
      return res.data.list
    },
    // 获取监控地址
    async getUrl (token, nvr, channelNo) {
      const res = await getUrlApi({
        accessToken: token,
        deviceSerial: nvr,
        channelNo: channelNo,
        protocol: '4'
      })
      console.log(res)
      console.log(res.data.data.url)
      return res.data.data.url
    },
    // 获取乐橙监控地址
    async getLcUrl (accessToken, channel, nvr) {
      const res = await getLcUrlApi({
        accessToken,
        channel,
        nvr
      })
      return res.data.data.url
    },
    init (val) {
      // 这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
      this.loading = true
      setTimeout(() => {
        try {
          // 使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
          const videoElement = this.$refs.videosmallone // 获取到html中的video标签
          if (flvjs.isSupported()) {
            // 因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
            if (this.player !== null) {
              this.player?.pause()
              this.player?.unload()
              this.player?.detachMediaElement()
              this.player?.destroy()
              this.player = null
            }
            this.player = flvjs.createPlayer(
              // 创建直播流，加载到DOM中去
              {
                type: 'flv',
                url: val, // 你的url地址
                isLive: true, // 数据源是否为直播流
                hasAudio: false, // 数据源是否包含有音频
                hasVideo: true, // 数据源是否包含有视频
                enableStashBuffer: true // 是否启用缓存区
              },
              {
                enableWorker: false, // 不启用分离线程
                enableStashBuffer: false, // 关闭IO隐藏缓冲区
                autoCleanupSourceBuffer: true, // 自动清除缓存
                lazyLoad: false
              }
            )
            this.player?.attachMediaElement(videoElement) // 放到dom中去
            this.player?.load() // 准备完成
            //! !!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
            this.player?.play() // 播放
            this.loading = false
          }
        } catch (e) {}
      }, 1000)
    }
  },
  beforeDestroy () {
    try {
      if (this.player) {
        this.player.pause()
        this.player.unload()
        this.player.detachMediaElement()
        this.player.destroy()
        this.player = null
      }
    } catch (e) {}
  }
}
</script>

<style lang="scss" scoped>
.videosmall {
  width: 100%;
  height: 100%;
}

.tunnelvideo {
  position: relative;
  /* 设置任意宽高任意一项即可 然后使用aspect-ratio元素 动态设置比例 */
  // height: 300px
  width: 100%;
  height: 100%;
  &:hover {
    .box-top {
      display: flex;
    }
  }
  .name {
    position: absolute;
    bottom: 0;
    left: 20px;
    color: #fff;
  }
  .box-top {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 50px;
    background-color: black;
    opacity: 0.3;
    color: #282b2b;
    .box-top-icon {
      text-align: center;
      cursor: pointer;
      width: 24px;
      height: 24px;
      line-height: 24px;
      background-color: #fff;
      border-radius: 6px;
      margin-right: 20px;
    }
    .box-top-ic {
      width: 24px;
      height: 24px;
      margin-right: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
